<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <span>查看往年课题</span>
      <el-date-picker
        v-model="year"
        type="year"
        placeholder="选择年"
        value-format="yyyy"
      />
    </div>
    <el-table
      :data="lists"
      border
      style="width: 100%"
      class="table"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="name"
        label="老师"
        width="180"
        align="center"
      />

      <el-table-column
        prop="title"
        label="课题"
      />

      <el-table-column
        prop=""
        label="课程详情"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onViewDetails(scope.row.theses_id)">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="课题状态"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success">选定中</el-tag>
          <el-tag v-else type="danger">已选定</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="students"
        label="已选学生"
        width="300"
        align="center"
        margin-left="10px"
      >
        <template slot-scope="scope">
          <el-tag v-for="s in scope.row.students" :key="s.id" type="success" :label="s.name" :value="s.id">
            {{ s.name }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        type="index"
        width="50"
        align="center"
      />

    </el-table>
    <el-dialog
      :title="thesisTitle"
      :visible.sync="isDialogVisible"
    >
      <div>
        {{ content }}
      </div>
      <el-button slot="footer" type="primary" @click="isDialogVisible = false">确 定</el-button>
    </el-dialog>

    <!-- 分页 -->

    <div class="block">
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[5,10,20,30,40,50,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getdata, getThesesById } from '@/api/totalTheses'

export default {
  data() {
    return {
      lists: [],
      year: '2020',
      currentPage: 1,
      count: 1,
      pageSize: 5,
      isDialogVisible: false,
      thesisTitle: '课程详情',
      theses_id: '',
      content: ''
    }
  },

  watch: {
    year(newVal) {
      this.getData(this.currentPage, this.pageSize, newVal)
    }
  },
  created() {
    this.getData()
  },

  methods: {
    // 获取后台数据
    getData() {
      var currentPage = this.currentPage
      var pageSize = this.pageSize
      var year = this.year
      getdata(currentPage, pageSize, year).then(res => {
        this.count = res.data.data.count
        this.lists = this.handleTableData(res.data.data.data)
      })
    },
    // 处理数据
    handleTableData(lists) {
      const arr = []
      for (let i = 0; i < lists.length; i++) {
        const name_info = lists[i]
        const thesis = name_info['theses']
        for (let j = 0; j < thesis.length; j++) {
          const info = {
            spanNum: j === 0 ? thesis.length : 0,
            id: name_info['id'],
            name: name_info['name'],
            phone: name_info['phone'],
            qq: name_info['qq'],
            theses_id: thesis[j]['id'],
            title: thesis[j]['title'],
            content: thesis[j]['content'],
            status: thesis[j]['status'],
            students: thesis[j]['students']
          }
          arr.push(info)
        }
      }
      return arr
    },

    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.spanNum > 0) {
          return {
            rowspan: row.spanNum,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },

    onViewDetails(id) {
      getThesesById(id).then(res => {
        this.content = res.data.data.content
      })
      this.isDialogVisible = true
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getData(this.currentPage, this.pageSize, this.year)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData(this.currentPage, this.pageSize, this.year)
    }
  }

}
</script>

<style lang="scss" scoped>
 .el-tag {
     margin-right:10px;
 }

 .block{
   margin-top: 10px;
 }
</style>
